<style lang="less" scoped>
  .steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    // text-align: center;
    padding: 20px;
  }
  
  .steps-action {
    margin-top: 24px;
  }
  
  .step2{
    .title{
      font-size: 24px;
      text-align: left;
      color: #02A84C;
    }
  }
  .tips{
    margin-top: 12px;
    width: 12rem;
    text-align: center;
  }
</style>
<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-form-model
        ref="ruleForm"
        :rules="rules"
        :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"
        style="width: 700px;"
        labelAlign="left" layout="horizontal">
          <a-form-model-item label="商品链接" prop="href" extra="采集后的数据请在'云库管理=>商品列表=>回收站商品'中查看">
            <a-textarea v-model="form.href" :rows="4" placeholder="请输入商品链接" />
          </a-form-model-item>
          <a-form-model-item label="供应链" name="type" prop="type">
            <a-select v-model="form.type" placeholder="请选择" @change="changeType">
              <a-select-option v-for="(item,index) in typeList" :key="index" :value="item.id">{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <!-- <a-form-model-item label="商品分类" prop="category_id">
            <a-cascader v-model="form.category_id" :options="categoryList" placeholder="请选择商品分类"/>
          </a-form-model-item>
          <a-form-model-item label="供应商" prop="supplier_id">
            <a-select v-model="form.supplier_id" placeholder="请选择">
              <a-select-option v-for="(item,index) in supplierList" :key="index" :value="item.id">{{item.contacts}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="排序" ref="sort" prop="sort" extra="数值越大，排序越靠前">
            <a-input v-model="form.sort" @blur="() => {$refs.sort.onFieldBlur();}" placeholder="数值越大排序越靠前"/>
          </a-form-model-item> -->
          <!-- <a-form-model-item label="是否下载图片" prop="is_down_pic">
            <a-radio-group v-model="form.is_down_pic">
              <a-radio value="1">
                是
              </a-radio>
              <a-radio value="2">
                否
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="是否上架" prop="is_up">
            <a-radio-group v-model="form.is_up">
              <a-radio value="1">
                立即上架
              </a-radio>
              <a-radio value="2">
                暂不上架
              </a-radio>
            </a-radio-group>
          </a-form-model-item> -->
          <a-form-model-item>
            <a-button type="primary" :loading="submitLoading" @click="submit">
              提交
            </a-button>
          </a-form-model-item>
        </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  // import QRCode from 'qrcode'
  // import moment from 'moment'
  import myUtils from '@/utils/myUtils.js';
  import {
    // STable
  } from '@/components'
  
  import { mapGetters,mapActions } from 'vuex'
  
  export default {
    name: 'getGoods',
    components: {
    },
    data() {
      return {
        id:'',
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        current: 0,
        typeList:[],
        form:{
          href:'',
          // category_id:[],
        },
        submitLoading:false,
        rules: {
          href: [
            { required: true, message: '请输入商品链接', trigger: 'blur' }
          ],
          // type:[{ required: true, message: '请选择供应链', trigger: 'blur' }],
          // category_id:[{ required: true, message: '请选择商品分类', trigger: 'blur' }],
          // supplier_id:[{ required: true, message: '请选择供应商', trigger: 'blur' }],
          // sort:[{ required: true, message: '请输入排序数值', trigger: 'blur' }],
          // is_up:[{ required: true, message: '请选择是否上架', trigger: 'blur' }],
        },
      }
    },
    computed:{
        ...mapGetters(['categoryList','supplierList']),
    },
    mounted() {
      console.log('this.$myUtils.getTypeList',this.$myUtils.getTypeList)
      this.typeList = this.$myUtils.getTypeList4Grap
      const params = {}
      this.GET_CATEGORY_LIST(params)
      this.getSupplirPage()
    },
    methods: {
      ...mapActions(['GET_CATEGORY_LIST','GET_SUPPLIER_PAGE','SET_GOODS_TYPE','SET_TYPE_LIST']),
      changeType(val) {
        console.log("val_type",val)
      },
      getSupplirPage() {
        const params = {
          pageNo:1,
          pageSize:1000
        }
        this.GET_SUPPLIER_PAGE(params)
      },
      submit() {
        this.submitLoading = true
        console.log('this.form',this.form)
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const params = {
              url: this.form.href,
              type: this.form.type,// 供应链
              // category_id: this.form.category_id,// 商品分类
              // supplier_id: this.form.supplier_id,// 供应商
              // sort: this.form.sort,// 排序
            }
            if(this.form.type==2){// 天猫
              this.$productApi.ProductGrabTM(params).then(res=>{
                if(res.url||res.ret==200){
                  this.$message.info('添加成功')
                }
              }).finally(()=>{
                this.submitLoading = false;
              })
            }else if(this.form.type==3){// 1688
              this.$productApi.ProductGrab1688(params).then(res=>{
                if(res.url||res.ret==200){
                  this.$message.info('添加成功')
                }
              }).finally(()=>{
                this.submitLoading = false;
              })
            }else if(this.form.type==4){ // 淘宝
              this.$productApi.ProductGrabTB(params).then(res=>{
                if(res.url||res.ret==200){
                  this.$message.info('添加成功')
                }
              }).finally(()=>{
                this.submitLoading = false;
              })
            }else if(this.form.type==5){ // 拼多多
              this.$productApi.ProductGrabPDD(params).then(res=>{
                if(res.url||res.ret==200){
                  this.$message.info('添加成功')
                }
              }).finally(()=>{
                this.submitLoading = false;
              })
            }
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      next() {
        this.current++;
      },
      prev() {
        this.current--;
      },
    },
  }
</script>
